<template>
    <div class="add-form">
        {{formData}}
                    <el-form ref="dataAddForm" :rules="rules" :model="formData" label-position="center" label-width="150px">
                        <!--<el-input type="hidden" v-model="formData.id"></el-input>-->
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="收货人名称" prop="name">
                                    <el-input v-model="formData.name"/>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-date-picker v-model="formData.birthday"  type="date" placeholder="选择日期"  style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="收货人手机号" prop="phone">
                                    <el-input v-model="formData.phone"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-form-item label="收货人地址" label-width="100px">
                                <el-select
                                        v-model="formData.province"
                                        placeholder="省级地区">
                                    <el-option
                                            v-for="item in provinceList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select
                                        v-model="formData.city"
                                        placeholder="市级地区">
                                    <el-option
                                            v-for="item in cityList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-select
                                        v-model="formData.county"
                                        placeholder="区级地区">
                                    <el-option
                                            v-for="item in countyList"
                                            :key="item.id"
                                            :label="item.name"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-row>
                    </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Returns">取消</el-button>
                <el-button type="primary" @click="handleAdd()">确定</el-button>
            </div>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        name: "Add",
        data() {
            return {
                id: 0,
                formData: {
                    province: '',
                    city: '',
                    county: '',
                    provinceId:''
                },
                provinceList: [],
                cityList: [],
                countyList: [],
                rules: {//校验规则
                     name: [{ required: true, message: '为必填项', trigger: 'blur' }],
                     phone: [{ required: true, min:11,max:11,message: '必须为数字，且长度为11', trigger: 'blur' }]
                }
            }
        },
        methods: {
            Returns(){
                this.$router.push({path:'/student'})
            },
            getProvinceData() {
                axios.get("http://localhost:8888/users/findPCC?id="+0).then(res => {
                    this.provinceList = res.data;
                })
            },
            getCityData(id) {
                axios.get("http://localhost:8888/users/findPCC?id=" + id).then(res => {
                    this.cityList = res.data;
                })
            },
            getCountyData(id) {
                axios.get("http://localhost:8888/users/findPCC?id=" + id).then(res => {
                    this.countyList = res.data;
                })
            },
            getById() {
                axios.get("http://localhost:8888/users/findById?id=" + this.id).then(res => {
                    this.formData = res.data
                })
            },
            handleAdd() {
                this.$refs['dataAddForm'].validate((valid) => { //获取 ref属性是dataEditForm的表单   validate表单检验的方法
                    // valid  描述的表单提交的结果(true  false)  true表单成功校验 false 表单校验失败
                    if (valid) {
                axios.post("http://localhost:8888/users/add", this.formData).then((res) => {
                    this.$message({
                        type: res.data.flag ? 'success' : 'error',
                        message: res.data.message
                    });
                    this.$router.push({path:'/student'})
                    }).catch((res) => {
                            if (res.message.includes("403")) {
                                this.$message.error("无操作权限！")
                            }
                        }).finally(() => {
                            //重新进行分页查询
                            this.findPage();
                        });
                    } else {
                        //表单校验不通过
                        this.$message.error("表单数据校验失败!");
                        return false;
                    }
                });
                // },
            },
        },
        watch: {
            'formData.province'(id) {
                this.getCityData(id);
                this.cityList = [];
                this.countyList = [];
                // this.consignee.city = '';
                // this.consignee.county = '';
            },
            'formData.city'(id) {
                this.getCountyData(id);
                this.countyList = [];
                // this.consignee.county = '';
            },
        },
        mounted() {
            // 查询下拉框 三级联动
            this.getProvinceData();
            this.id = this.$route.params.id;
            console.log(this.id)
            if (this.id == undefined) {
                this.id=0
                //alert("添加");
            } else {
                //alert("修改");

                this.getById()
            }
        }
    }
</script>

<style scoped>

</style>
